<template>

  <div id="app" class="vui-widget">
    <v-layout>
      <v-header :fixed="true" class="index-header">
        <button @click="toggleSider()">sider</button>
        <img class="index-logo" src="./assets/logo.png" alt="">
        <ul class="index-header-nav">
          <li v-for="router in routers">
            <router-link :to="router.path" :class="{'router-link-exact-active':$route.path.indexOf(router.path)>=0}">{{router.label}}</router-link>
          </li>
        </ul>
      </v-header>
      <div class="vui-content">
          <router-view :hide-sider="hideSider"/>
      </div>
    </v-layout>
  </div>

</template>

<script>
import { HeaderRouter} from './app/app.vui.router';
import {vLayout, vHeader, vScrollbar} from './vui/components/api';
export default {
  name: 'app',
  data () {
    return {
      routers:HeaderRouter.slice(1),
      hideSider:false,
    }
  },

  methods: {
    toggleSider: function() {
      console.log(this)
      this.hideSider = !this.hideSider;
    },

    onScrolling:function(event){
      console.log('scrolling',event);
    },

    onScrollEnd:function(event){
      console.log('scroll end',event);
    }
  },
  components: {
    vLayout,
    vHeader,
    vScrollbar,
  }
}
</script>
<style lang="sass">
@import 'app/components/style'
</style>